<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>医生排班</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
  <form class="layui-form"  lay-filter="dataFrm" id="dataFrm" style="margin-left: 50px">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期一:</label>
        <div class="layui-input-inline">
          <input type="hidden" name="doctorId">
          <select name="one" class="bid" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期二:</label>
        <div class="layui-input-inline">
          <select name="two" class="bid" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期三:</label>
        <div class="layui-input-inline">
          <select name="three" class="bid" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期四:</label>
        <div class="layui-input-inline">
          <select name="four" class="bid" lay-verify="required"  lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期五:</label>
        <div class="layui-input-inline">
          <select name="five" class="bid" lay-verify="required"  lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期六:</label>
        <div class="layui-input-inline">
          <select name="six" class="bid" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">星期日:</label>
        <div class="layui-input-inline">
          <select name="seven" class="bid" lay-verify="required"  lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>

    </div>

    <div class="layui-form-item" style="text-align: center;margin-left: -100px">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
      </div>
    </div>

  </form>

</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
  <form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
          <input type="text" name="doctorName"  autocomplete="off" class="layui-input" style="width:200px" >
        </div>
      </div>
      <div class="layui-inline" style="position: absolute;left: 340px;top:81px;">
        <div class="layui-input-inline">
          <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
      </div>
    </div>
  </form>
</blockquote>
<!--搜索结束-->

<table class="layui-hide" id="paibanTable" lay-filter="paibanTable"></table>

<div  id="paiban" style="display: none;">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</div>

<!-- 数据表格结束 -->
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="none">
  var tableIns;
  layui.extend({
    dtree:'../../js/layui_ext/dist/dtree'
  }).use([ 'jquery', 'layer', 'form', 'table'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    //渲染数据表格
    tableIns=table.render({
      elem: '#paibanTable'   //渲染的目标对象
      ,url:'/web/paiban/findAllPaiban' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,height:'full-170'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [10, 20, 30]
      ,limit: 10//默认采用10
      ,cols: [[   //列表数据
        {field:'doctorId', title:'ID',align:'center',width:'10%',sort:true}
        ,{field:'doctorName', title:'姓名',align:'center',width:'10%'}
        ,{field:'one', title:'星期一',align:'center',width:"10%",templet:function(d){
            if(d.one==null){
              return "无班";
            }else{
              return d.one;
            }
          }}
        ,{field:'two', title:'星期二',align:'center',width:"10%",templet:function(d){
            if(d.two==null){
              return "无班";
            }else{
              return d.two;
            }
          }}
        ,{field:'three', title:'星期三',align:'center',width:"10%",templet:function(d){
            if(d.three==null){
              return "无班";
            }else{
              return d.three;
            }
          }}
        ,{field:'four', title:'星期四',align:'center',width:"10%",templet:function(d){
            if(d.four==null){
              return "无班";
            }else{
              return d.four;
            }
          }}
        ,{field:'five', title:'星期五',align:'center',width:"10%",templet:function(d){
            if(d.five==null){
              return "无班";
            }else{
              return d.five;
            }
          }}
        ,{field:'six', title:'星期六',align:'center',width:"10%",templet:function(d){
            if(d.six==null){
              return "无班";
            }else{
              return d.six;
            }
          }}
        ,{field:'seven', title:'星期日',align:'center',width:"10%",templet:function(d){
            if(d.seven==null){
              return "无班";
            }else{
              return d.seven;
            }
          }}
        ,{fixed: 'right', title:'操作', toolbar: '#paiban',align:'center',width:'10%'}
      ]]
    })


    //模糊查询
    $("#doSearch").click(function(){
      var params=$("#searchFrm").serialize();
      tableIns.reload({
        url:"/web/paiban/findAllPaiban?"+params
      })
    });
    $.ajax({
      url: '/web/paiban/findAllBan',
      dataType: 'json',
      type: 'post',
      success: function (data) {
        $.each(data, function (index, item) {
          $('.bid').append(new Option(item.bname, item.bname));// 下拉菜单里添加元素
        });
        layui.form.render("select");//重新渲染 固定写法
      }
    })
    //监听行工具事件
    table.on('tool(paibanTable)', function(obj){
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if(layEvent === 'del'){ //删除
        layer.confirm('真的删除【'+data.doctorName+'】这个医生吗', function(index){
          //向服务端发送删除指令
          $.post("/web/doctor/deleteDoctor",{doctorId:data.doctorId},function(res){
            layer.msg(res);
            //刷新数据 表格
            tableIns.reload();
          })
        });
      } else if(layEvent === 'edit'){ //编辑
        openUpdatePaiban(data);
      }
    });
    var url;
    var mainIndex;
    //打开修改页面
    function openUpdatePaiban(data){
      mainIndex=layer.open({
        type:1,
        title:'修改排班',
        content:$("#saveOrUpdateDiv"),
        area:['500px','600px'],
        success:function(index){
          form.val("dataFrm",data);
          url="/web/paiban/editPaiban";
        }
      });
    }
    //保存
    form.on("submit(doSubmit)",function(obj){
      //序列化表单数据
      var params=$("#dataFrm").serialize();
      $.post(url,params,function(obj){
        layer.msg(obj);
        //关闭弹出层
        layer.close(mainIndex)
        //刷新数据 表格
        tableIns.reload();
      })
    });
  });
</script>
</body>
</html>